<template>
	<div style="width:100%">
		<u-upload 
			class="upload-common" 
			:action="uploadUrl" 
			:header="headers" 
			@on-change="handleChange"
			:multiple="multiple" 
			:before-upload="beforeUpload" 
			:auto-upload="autoUpload" 
			:file-list="fileList" 
			@on-list-change="handleChange"
			:deletable="deletable"
			:show-progress="deletable"
			:custom-btn="!deletable"
			:to-json="toJson" 
			:list-type="listType">
		</u-upload>
		<u-toast ref="uToast" />
	</div>
</template>
<style>
	.file-row-icon {
		float: right;
		margin-right: 0.625rem;
	}
</style>
<script>
	import request from 'utils/request'
	import {
		getToken
	} from 'utils/auth'
	export default {
		name: 'upload',
		props: {
			"fileIds": {
				type: String,
				default: ""
			},
			"multiple": {
				type: Boolean,
				default: false
			},
			// 是否是图片列表
			"listType": {
				type: String,
				default: "text"
			},
			"deletable":{
				type: Boolean,
				default: true
			},
			"disabled":{
				type: Boolean,
				default: false
			},
			
		},
		data() {
			const config = require('base-config.js'); 
			return {
				toJson: true,
				autoUpload: true,
				dialogImageUrl: '',
				dialogVisible: false,
				headers: {
					'X-Token': getToken()
				},
				uploadUrl: config.default.baseUrl + "/system/file/upload",
				imageUrl: config.default.baseUrl + "/system/file/download?X-Token=" + getToken() + "&fileId=",
				fileList: [],
				updateList:  true,
			};
		},
		watch: {
			fileIds: function(oldVal, newVal) {
				if(this.updateList){
					this.getFileList();
				}
				this.updateList = true;
			}
		},
		//页面初始化加载
		mounted() {
			this.getFileList();
		},
		methods: {
			handlePictureCardPreview(file) {
				this.dialogImageUrl = this.imageUrl + file.fileId;
				this.dialogVisible = true;
			},
			handleChange(res, index, fileList, name) {
				if(res instanceof Array){
					return;
				}
				let resp = JSON.parse(res.data)
				let _this = this;
				resp.data["url"]  = _this.imageUrl +  resp.data.fileId;
				 
				// this.fileList = fileList
				if (resp && resp.code == 20000) {
					let fileIds = [];
					for (var i = 0; i < fileList.length; i++) {
						if (fileList[i].url.indexOf("blob") == 0) {
							fileList[i]['fileId'] = resp.data.fileId;
							fileList[i]['info'] = resp.data;
							fileList[i]['url'] = _this.imageUrl +  resp.data.fileId;
							// this.$emit("fileInfo", file.response.data);
							fileIds.push(fileList[i]['fileId']);
						}
					}
					for (var i = 0; i < this.fileList.length; i++) {
						fileIds.push(this.fileList[i]['fileId']);
					}
					this.updateList = false;
					this.$emit("update:fileIds", fileIds.toString())
				}
			},
			//根据文件Id获取文件列表
			getFileList() {
				let _this = this;
				if (!this.fileIds) {
					this.fileList = [];
					return;
				}
				var params = {
					fileIds: this.fileIds
				}
				request({
					url: '/system/file/query',
					method: 'post',
					data: params
				}).then(response => {

					_this.fileList = response.data.map((value, key, arr) => {
						value.uid = value.fileId;
						value.name = value.fileName;
						value.url = _this.imageUrl + value.fileId;
						return value;
					})

					// this.fileList = response.data;
				})
			},

			// 文件刪除
			handleRemove(file) {
				for (var i = 0; i < this.fileList.length; i++) {
					if (file.uid == this.fileList[i].uid) {
						this.fileList.splice(i, 1)
						break;
					}
				}
				this.updateFileIds();
			},
			updateFileIds() {
				let fileIds = [];
				for (var i = 0; i < this.fileList.length; i++) {
					fileIds.push(this.fileList[i]['fileId']);
				}
				this.updateList = false;
				this.$emit("update:fileIds", fileIds.toString())
			},
			beforeUpload(index,lists) {
				if (!this.multiple && index >= 1) {
					this.$refs.uToast.show({
						title: '只能上传一个文件',
						
					})
					return false;
				}
			},
			//文件下载
			handleDownload(file) {
				var fileId = file.fileId;
				let entity = {
					fileId: fileId,
				}
				axios({
					url: process.env.VUE_APP_BASE_API + "/system/file/download",
					method: 'post',
					data: entity,
					responseType: 'blob'
				}).then(response => {
					this.download(response.data, file)
				})

			},
			// 下载文件
			download(data, row) {
				if (!data) {
					return
				}
				let url = window.URL.createObjectURL(new Blob([data]))
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				// 获取文件名
				// download 属性定义了下载链接的地址而不是跳转路径
				link.setAttribute('download', row.name)
				document.body.appendChild(link)
				link.click()
			},
			// 在线预览
			handlePreview(file) {
				window.open(process.env.VUE_APP_BASE_API + "/system/html/onlyOffice.html?mode=view&fileId=" + file.fileId +
					"&X-Token=" + getToken(), '_blank')
			},
			// 在线编辑
			handleEdit(file) {
				window.open(process.env.VUE_APP_BASE_API + "/system/html/onlyOffice.html?mode=edit&fileId=" + file.fileId +
					"&X-Token=" + getToken(), '_blank')
			}
		}
	}
</script>
<style>
	.upload-common {
		width: 18rem;
	}
	.avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
